<template>
  <div>
        <!-- 导航栏 -->
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
     <van-card
      v-for="(item, index) in $store.state.mnCart"
      :key="index"
      num="2"
      :price="item.price"
      :title="item.title"
    >
    <template #desc>
          <input type="checkbox" name="" id="" v-model="item.checked" @change="unCheckAll">
          <el-button type="danger" size="mini" @click="remove(index)">删除</el-button>
    </template>
    <template #thumb>
  <van-image :src="item.pic"/>
    </template>
  <template #num>
      <van-stepper v-model="item.num" />
  </template>
    </van-card>
    <!-- 提交订单 -->
    <van-submit-bar :price="prices" button-text="提交订单" style="margin-bottom:50px" >
        <input type="checkbox" name="" id="" v-model="checked" @change="checkAll">全选
    </van-submit-bar>
  </div>
</template>
<script>
export default {
    data() {
        return {
             checked:false,
        }
    },
    methods: {
         //全选
    checkAll(){
        //遍历购物车中的数据
        this.$store.state.mnCart.forEach(item => {
           item.checked = this.checked 
        });
    },
    //反选
    unCheckAll(){
        //先找出选中商品的总个数
        let tmp = this.$store.state.mnCart.filter(item=>{
            return item.checked == true;
        })
        console.log(tmp.length);
        //判断商品的总个数是否等于选中商品的个数
        if (this.$store.state.mnCart.length == tmp.length) {
            console.log('全选');
            this.checked = true;
        }else{
            this.checked = false;
        }
    },
    //删除的方法
    remove(index){
        console.log(index);
        this.$store.commit('del',index)
    }
    },
    computed:{
        //计算商品的总价格
        prices(){
            let num1 = 0;
            //遍历所有的商品
            this.$store.state.mnCart.forEach(item=>{
                if (item.checked == true) {
                    return num1 += item.num * item.old_price;
                }
            })
            return num1 * 100;
        }
    },
   
}
</script>